<script setup>
import { ref , onMounted} from 'vue'
import { userPutProFileService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/index.js'
import PageContainer from '@/components/PageContainer.vue'

const form = ref()
const ruleForm = ref({
  username: '',
  nickname: '',
  email: '',
})
const rules = ({
  nickname: [
    { required: true, message: '昵称不能为空', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
  ],
})

const userStore = useUserStore()

const getUserInfo = async () => {
  ruleForm.value = userStore.userInfo
}

onMounted(() => {
  getUserInfo()
})

const submitForm = async () => {
  const res = await userPutProFileService(ruleForm.value)
  console.log(res)
  ElMessage.success("修改成功")
  await userStore.renewInfo()
  await getUserInfo()
}
</script>

<template>
  <page-container title="基本信息">


    <el-form
      ref="form"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item prop="username" label="登录名称">
        <el-input v-model="ruleForm.username" disabled/>
      </el-form-item>

      <el-form-item prop="nickname" label="用户昵称">
        <el-input v-model="ruleForm.nickname" />
      </el-form-item>

      <el-form-item prop="email" label="用户邮箱">
        <el-input v-model="ruleForm.email" />
      </el-form-item>

      <el-form-item>
        <el-button @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>

  </page-container>
</template>

<style scoped>
.el-form {
  padding: 0 20px;
}

.el-button {
  background-color: #409eff;
  color: white;
  margin-top: 20px;
}

.el-button:hover {
  background-color: #66b1ff;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-input.is-disabled :deep(.el-input__inner) {
  background-color: #f5f7fa;
  color: #909399;
  cursor: not-allowed;
}
</style>
